<template>
    <div>
        <!-- form -->
        <!-- 
            【基础信息】：*企业全称、*企业简称、LOGO（图片）、*所属行业、企业网址、*企业域名、状态（启用/禁用）企业ID（自动生成）
                          fullName    shorterName   logo       trade     website   realmName  status          id
            【更多信息】：企业营业执照（图片）、企业信用代码、企业联系人、联系电话、企业简介 
                          license               creditCode    contacts    phone    synopsis
         -->
        
        <!-- 【基础信息】------------- -->
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px">
            <el-form-item label="企业全称" prop="fullName">
                <el-input v-model="ruleForm.fullName" placeholder="请输入企业全称" class="input"></el-input>
            </el-form-item>
            <el-form-item label="企业简称" prop="shorterName">
                <el-input v-model="ruleForm.shorterName" placeholder="请输入企业简称" class="input"></el-input>
            </el-form-item>
            <el-form-item label="企业LOGO" prop="logo">
                <uploadImage v-model="ruleForm.logo" :tipmsg="tipmsg" />
            </el-form-item>
            <el-form-item label="所属行业" prop="trade">
                <el-select v-model="ruleForm.trade" placeholder="请选择所属行业" class="select">
                    <el-option label="行业一" value="val1"></el-option>
                    <el-option label="行业二" value="val2"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="企业网址" prop="website">
                <el-input v-model="ruleForm.website" placeholder="请输入企业网址" class="input"></el-input>
            </el-form-item>
            <el-form-item label="企业域名" prop="realmName">
                <el-input v-model="ruleForm.realmName" placeholder="请输入企业域名" class="input"></el-input>
            </el-form-item>
            <el-form-item label="状态" prop="status">
                <el-switch v-model="ruleForm.status"></el-switch>
            </el-form-item>
            <!-- 企业ID 自动生成 -->
            <el-form-item label="企业ID" prop="id">
                <el-input v-model="ruleForm.id" disabled class="input id"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submitForm('ruleForm')">保存</el-button>
                <el-button @click="resetForm('ruleForm')">重置</el-button>
            </el-form-item>
        </el-form>

        <!-- 【更多信息】------------- -->
    </div>
</template>

<script>
import UploadImage from '@/components/ImageUpload';

export default {
    name: 'forms',
    data() {
        return {
            tipmsg: '支持上传jpg/png文件，且不超过500kb',
            ruleForm: {
                fullName: '',
                shorterName: '',
                logo: '',
                trade: '',
                website: '',
                realmName: '',
                status: false,
                id: '72020'
            },
            rules: {
                fullName: [
                    { required: true, message: '请输入企业全称', trigger: 'blur' },
                    { min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' }
                ],
                shorterName: [
                    { required: true, message: '请输入企业简称', trigger: 'blur' },
                    { min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur' }
                ],
                trade: [
                    { required: true, message: '请选择所属行业', trigger: 'change' }
                ],
                realmName: [
                    { required: true, message: '请填写企业域名', trigger: 'blur' }
                ]
            }
        }
    },
    components: {
        UploadImage
    },
    methods: {
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    alert('submit!');
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
        }
    }
}
</script>

<style scoped lang="scss">

</style>
